<template>
  <!--面包屑-->
  <div style="margin-bottom: 30px">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <router-link to="/Materials/ShowMaterialRequisition">物资领用</router-link>
      </el-breadcrumb-item>
      <el-breadcrumb-item>物资领用已审批申请</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  
  
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="form" :rules="rules" label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
  
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入领用标题"  disabled/>
      </el-form-item>
  
      <el-form-item label="用途描述" prop="usageDescription">
        <el-input v-model="form.usageDescription" :rows="3" type="textarea" disabled/>
      </el-form-item>
  
      <el-form-item label="备注" prop="materialRequisitNotes">
        <el-input v-model="form.materialRequisitNotes" :rows="3" type="textarea" disabled/>
      </el-form-item>
  
      <el-form-item label="选择领用物品:" prop="materialStoreId">

      </el-form-item>
  
      <div style="margin-left: 95px;margin-bottom: 30px;">
        <table border style="border-collapse: collapse;width: 100%;background-color:gainsboro;text-align: center;" >
        <thead></thead>
        <tbody>
          <tr>
            <td>货物名称</td>
            <td>类型</td>
            <td>材质</td>
            <td>规格</td>
            <td>产地</td>
            <td>仓库数量</td>
            <td>领用数量</td>
            <td>操作</td>
          </tr>
  
          <tr v-for="item in sotreDataListByIdData" :key="item.materialRequisitionId">
            <td>{{ item.nameOfGoods }}</td>
            <td>{{ item.materialStoreType }}</td>
            <td>{{ item.material }}</td>
            <td>{{ item.specifications }}</td>
            <td>{{ item.countryName }}</td>
            <td>{{ item.number }}</td>
            <td>
              <el-input v-model="item.quantityReceived" disabled></el-input>
            </td>
          </tr>
        </tbody>
      </table>
      </div>
    </el-form>

    <el-table :data="ContractApprova" border style="width: 100%">
    <el-table-column prop="approvalResult" label="审批结果" align="center"/>
       <el-table-column prop="approvalNotes" label="备注" align="center">
            <template v-slot="scope">
<span v-if="scope.row.approvalNotes==''">-</span>
            </template>
       </el-table-column>
           <el-table-column prop="createdDate" label="审批时间" align="center">
            <template v-slot="scope">
{{ scope.row.createdDate.replace('T', ' ').substring(0,19) }}
            </template>
           </el-table-column>
               <el-table-column prop="approver" label="审批人" align="center"/>
  </el-table>
  </template>
  
  <script setup lang="ts">
  import { reactive, ref, onMounted, computed } from 'vue'
  import axios from 'axios';
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
  import { ElMessage, ElMessageBox } from 'element-plus'
  
  import {useRoute,useRouter} from 'vue-router'
  import { number } from 'echarts';
  
  const route = useRoute();
  const router = useRouter();
  const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()
  
  onMounted(() => {
    getMaterialRequisitionById()

    getUserSelect()

    getContractApproval()
  })
  
    //审批表
    const from=reactive({
    approvalResult:'',
    approvalNotes:'',
    approver:'',
    materialRequisitionId:'',
    subgrantor:''
})

  const form: any = reactive({
    materialRequisitionId:'',
    // companyID: '',
    // user_Id:'',
     title: "",
     usageDescription: "",
    materialRequisitNotes: "",
    // collectionDate:'',
    approvalStatus: 10,
    // recipient:'',
    materialRequisitionDtos:[]
  })
  
  //校验
  const rules = reactive<FormRules>({
    title: [
      { required: true, message: '请输入领用标题', trigger: 'blur' },
    ],
    usageDescription: [
      { required: true, message: '请输入用途描述', trigger: 'blur' },
    ],
  })

  //反填
  const getMaterialRequisitionById = () => {
    axios.get('/mread//api/ShwoMaterialRequisition/ReverseMaterialRequisition', {
      params: {
        MaterialRequisitionId:route.query.materialRequisitionId
      }
    }).then(res=>{
    //console.log(res);
      let materialData: any = res.data.data;
      let materialRequisitionId:any =route.query.materialRequisitionId;
      form.title = materialData.title;
      form.usageDescription= materialData.usageDescription;
      form.materialRequisitNotes = materialData.materialRequisitNotes;
      GetsotreDataList(materialRequisitionId)
  }).catch(err=>{
    console.log(err);
    
  })    
  }

  //反填物品领用信息
  const sotreDataListByIdData:any=ref([])
  const GetsotreDataList = (materialRequisitionId:number) => {
    axios.get('/mread/api/ShwoMaterialRequisition/ReverseStorageMaterials?MaterialRequisitionId='+materialRequisitionId).then(res=>{
      // console.log(res);
      if (res.data.data.length > 0) {
        sotreDataListByIdData.value.push(res.data.data[0]) ;
      }

  
    }).catch(err=>{
      console.log(err);
      
    })    
  }

  //用户名称列表
  const UserSelectData: any = ref([])
    const username: any = ref([])
const getUserSelect=()=>{
  axios.get('http://1.117.93.87:8000/rbacdu/api/User/UserSelectShow').then(res=>{
    //console.log(res);
    UserSelectData.value = res.data.data
    username.value =UserSelectData.value.filter((o:any)=>o.name!=localStorage.getItem('username'));
  }).catch(err=>{
    console.log(err);
    
  })    
    }

//显物资领用审批记录
const ContractApprova:any=ref([])
const getContractApproval = async () => {
  axios.get("/mread/api/ExamineAndApprove/GetMaterialRequisitionApprovalRecordList?MaterialRequisitionId=" + route.query.materialRequisitionId).then(res => { 
    ContractApprova.value=res.data.data
    //console.log(res.data);
  })
}

  
  </script>
  
  <style scoped>
  
  </style>